<template>
  <view>
    <u-checkbox-group @change="onChange" v-model="selectValue" class="box">
    <view class="footerBox" v-if="list.length>0">
      <view v-for="(item, listIndex) in list" :key="listIndex" :data-index="listIndex" :data-list="list">
        <view class="listTime">
          <view class="listDateCheck" v-if="isDeal">
            <!-- <u-checkbox v-model="item.isDataCheck" @change="dataOnChange" activeColor="#FD4D63" iconSize="18px"
              :data-index="listIndex"></u-checkbox> -->
              <!-- <u-checkbox shape="circle" :name="{index:listIndex}" @change="dataOnChange"  iconSize="18px" activeColor="#FD4D63"></u-checkbox> -->
              <!-- <view @click="dataOnChange" :data-index="listIndex">111</view> -->
          </view>
          {{item.date}}
        </view>
          <view class="box">
            <view v-for="(good, index) in item.shopList" :key="index" class="shopList" :data-index="listIndex"
              :data-shopindex="index" @longpress="deleteFootprint" @tap.stop="toProductDetail" style="position: relative">
              <view class="listCheck" v-if="isDeal">
                <u-checkbox shape="circle" :name="good.footmarkId"  iconSize="18px" activeColor="#FD4D63"></u-checkbox>
              </view>
              <view style="width: 102px;height: 102px;padding-left: 10px;">
                <image :src="good.productPic" lazy-load mode="aspectFill" style="width:102px;height:102px"></image>
                <view class="listContent__imgUseless" v-if="good.status===0">失效</view>
              </view>
              <view class="longDelate" v-if="good.isDelete">
                <view class="longDelate__centerDelete" @tap.stop="deleteSure">
                  删除
                </view>
              </view>
              <view class="listContent">
                <view class="product__name">{{good.productName}}</view>
                <view class="price__line">
                  <view class="product__price">
                    <span>{{good.intPrice}}</span>
                    <span style="font-weight:weight;font-size:15px;">.{{good.smaPrice}}</span>
                  </view>
                  <view class="product__oriPrice" v-if="good.productPrice!=='0.00'">
                    {{good.originalPrice}}
                  </view>
                </view>
              </view>
            </view>
          </view>
      </view>
    </view>
    </u-checkbox-group>
    <view style="height:90px" class="tipNoMore" v-if="list.length>0">-------没有更多了-------</view>
    <view class="footerBox__bottom" v-if="list.length>0">
      <view v-if="!isDeal" class="footerBox__bottom--choose">
        <view @tap="cleanAll">一键清空</view>
        <view @tap="editAll">编辑</view>
      </view>
      <view v-else class="footerBox__bottom--choose">
        <view @tap.stop="checkAllDeal" v-if="!isAllCheck" data-type="true">全选</view>
        <view @tap.stop="cancelCheckAllDeal" v-if="isAllCheck" data-type="false">取消全选</view>
        <view @tap.stop="cancelDeal">取消</view>
        <view style="color:#FE4E63" @tap.stop="checkAllDel">删除</view>
      </view>
    </view>
    <view v-if="list.length===0" :style="'height:' + height + 'px'" class="noReviews">
      <view class="noReviews__center">
        <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/footmark.png"
          class="noReviews__center--img"></image>
        <view class="noReviews__center--text">暂无足迹~</view>
      </view>
      <view class="noCollect__button" @tap="gotoIndex">去逛一逛</view>
    </view>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    userFooterList,
    userFooterDel
  } from "@/api/modules/goods";

  @Component({})
  export default class Collect extends Vue {

    /** 商品数组列表 */
    list: any[] = []
    /** 编辑状态 */
    isDeal: boolean = false
    /** 是否全选状态 */
    isAllCheck: boolean = false
    /** 商品列表查询条件 */
    query: any = {
      current: 1,
      size: 10,
    }
    /** 是否有分页信息 */
    hasMore: boolean = false
    height: number = 0
    selectValue=[]
    allSelectValue=[]
    
    // 页面周期函数--监听页面显示(not-nvue)
    onShow() {
      this.getFooterList();
      uni.getSystemInfo({
        success: res => {
          this.setData({
            height: res.windowHeight,
          });
        },
      });
    }

    /**
     * 获取足迹商品
     */
    getFooterList(query = {}, type = false) {
      if (this.hasMore) return;
      userFooterList(Object.assign({}, this.query, query)).then(res => {
        const list = this.list;
        let newList = [];
        let dates = [];
        if (res.length > 0) {
          res.forEach(v => {
            const vList = JSON.parse(v);
            vList.forEach(vItem => {
              vItem.originalPrice = vItem.originalPrice.toFixed(2);
              vItem.productPrice = vItem.productPrice.toFixed(2);
              vItem.intPrice =
                vItem.productPrice !== "0.00" ?
                vItem.productPrice.split(".")[0] :
                vItem.originalPrice.split(".")[0];
              vItem.smaPrice =
                vItem.productPrice !== "0.00" ?
                vItem.productPrice.split(".")[1] :
                vItem.originalPrice.split(".")[1];
            });
            newList = newList.concat(vList);
          });
        }
        this.hasMore = res.length === this.query.size ? false : true;
        dates = [
          ...new Set(
            newList.map(v => {
              return v.time;
            }),
          ),
        ];
        if (list.length > 0 && list[list.length - 1].date === dates[0]) {
          list[list.length - 1].shopList = list[list.length - 1].shopList.concat(
            newList.filter(v => {
              return v.time === dates[0];
            }),
          );
          dates.shift();
        }
        dates.forEach(v => {
          list.push({
            date: v,
            isDataCheck: false,
            shopList: newList.filter(m => {
              return m.time === v;
            }),
          });
        });
        if (type && this.isAllCheck && this.isDeal) {
          list.forEach(item => {
            item.isDataCheck = true;
            item.shopList.forEach(v => {
              v.isCheck = true;
            });
          });
        }
        this.setData({
          list,
          hasMore: this.hasMore,
        });
      });
    }
    // 页面处理函数--监听用户上拉触底
    onReachBottom() {
      this.setData({
        "query.current": ++this.query.current
      });
      this.getFooterList({}, true);
    }
    /**
     * 选择商品
     */
    onChange(e) {
      this.$nextTick(()=>{
        this.checkout()
      })
    }
    /**
     * 检查是否有全选
     */
    checkout() {
      const listLength = this.list.map(item=>{
        return item.shopList.length
      }).reduce((total,current)=>{
        return total+current
      });
      const selectLength=this.selectValue.length
      this.setData({
        isAllCheck:selectLength===listLength?true:false,
      });
    }

    /**
     * 长按操作
     */
    deleteFootprint(e) {
      const index = e.currentTarget.dataset.index;
      const shopindex = e.currentTarget.dataset.shopindex;
      const list = this.list;
      list.forEach(v => {
        v.shopList.forEach(item => {
          item.isDelete = false;
        });
      });
      this.setData({
        list,
      });
      if (this.isDeal) {
        return;
      }

      list[index].shopList[shopindex].isDelete = true;
      this.setData({
        list,
      });
    }

    /**
     * 点击操作
     */
    toProductDetail(e) {
      const index = e.currentTarget.dataset.index;
      const shopindex = e.currentTarget.dataset.shopindex;
      const list = this.list;
      list.forEach(item => {
        item.shopList.map(v => {
          return (v.isDelete = false);
        });
      });
      this.setData({
        list,
      });
      const id = list[index].shopList[shopindex].productId;
      if (!this.isDeal) {
        uni.navigateTo({
          url: "/subcontract/pages/detail/detail?id=" + id,
        });
      }
    }

    /**
     * 删除操作
     */
    deleteSure() {
      // const index = e.currentTarget.dataset.index;
      // const shopindex = e.currentTarget.dataset.shopindex;
      // const list = this.list;
      const footmarkIds = [];
      // footmarkIds.push(list[index].shopList[shopindex].footmarkId);
      // uni.showModal({
      //   title:"提示",
      //   content:'确认删除此商品记录吗',
      //   success:()=>{
      //     userFooterDel(0, footmarkIds).then(() => {
      //       const query = {
      //         current: 1,
      //         size: this.query.size * this.query.current,
      //       };
      //       this.setData({
      //         list: [],
      //         hasMore: false,
      //       });
      //       this.getFooterList(query);
      //       uni.showToast({
      //         title: "删除成功",
      //         icon: "none"
      //       });
      //     });
      //   },
      //   fail:()=>{
      //   // list[index].shopList[shopindex].isDelete = false;
      //   //   this.setData({
      //   //     list,
      //   //   });
      //   }
      // })
    }

    /**
     * 一键清空
     */
    cleanAll() {
      uni.showModal({
        title: "提示",
        content: "确认清空商品浏览记录吗",
        success:(res)=>{
          if(res.confirm){
          userFooterDel(1, [-1]).then(() => {
          this.getFooterList();
          this.setData({
            list: [],
          });
        });
          }
        }
      })
    }

    /**
     * 编辑
     */
    editAll() {
      const list = this.list;
      list.forEach(item => {
        item.shopList.map(v => {
          return (v.isDelete = false);
        });
      });
      this.setData({
        list,
        isDeal: true,
      });
    }

    /**
     * 全选与取消全选
     */
    checkAllDeal() {
      const arr=this.list as any
      const tempArr=[]
      for(let i =0 ;i<arr.length;i++){
        for(let j=0;j<arr[i].shopList.length;j++){
          tempArr.push(arr[i].shopList[j].footmarkId)
        }
      }
      this.setData({
        isAllCheck:true,
        selectValue:tempArr
      });
    }
    cancelCheckAllDeal(){
            this.setData({
        isAllCheck:false,
        selectValue:[]
      });
    }

    /**
     * 取消清除
     */
    cancelDeal() {
      this.setData({
        selectValue:[],
        isDeal: false,
        isAllCheck: false,
      });
    }

    /**
     * 多选删除
     */
    checkAllDel() {
      const footmarkIds = this.selectValue;
      if (!footmarkIds.length) {
        uni.showToast({
          icon: "none",
          title: "请先选择删除商品",
        });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确认删除选中商品吗",
        success:(res)=>{
          if(res.confirm){
          userFooterDel(0, footmarkIds).then(() => {
          const query = {
            current: 1,
            size: this.query.size * this.query.current,
          };
          this.setData({
            list: [],
            isDeal: false,
            hasMore: false,
          });
          this.getFooterList(query);
        });
          }

        }
      })
    }

    /**
     * 返回首页
     */
    gotoIndex() {
      this.$store.dispatch('settingStore/backHome');
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f4f4;
  }

  .listTime {
    height: 35px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 13px;
  }

  .box {
    background-color: white;
    border-radius: 9px;
    padding: 5px;

  }

  .shopList {
    height: 121px;
    background-color: white;
    display: flex;
    padding: 10px 0px;
  }

  .listDateCheck {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .listCheck {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .listContent {
    width: 215px;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .listContent__imgUseless {
    width: 100px;
    height: 25px;
    position: absolute;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    background-color: #FEA00C;
    opacity: 0.8;
  }

  .longDelate {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    width: 100%;
    height: 100%;
  }

  .longDelate__centerDelete {
    display: flex;
    justify-content: center;
    width: 140rpx;
    height: 140rpx;
    background-color: #fea00b;
    border-radius: 70rpx;
    color: white;
    align-items: center;
  }

  .product__name {
    width: 215px;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    font-size: 26rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .price__line {
    display: flex;
    align-items: flex-end;
  }

  .product__price {
    margin-top: 5px;
    font-size: 20px;
    color: #fa5555;
    margin-right: 10px;
    font-weight: bold;
  }

  .product__price::before {
    margin-top: 5px;
    content: "￥";
    font-size: 15px;
    font-weight: normal;
  }

  .product__oriPrice {
    margin-top: 5px;
    font-size: 12px;
    color: #ccc;
    font-weight: bold;
    text-decoration: line-through;
  }

  .product__oriPrice::before {
    margin-top: 5px;
    font-size: 12px;
    content: "￥";
  }

  .footerBox__bottom {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
  }

  .footerBox__bottom--choose {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .tipNoMore {
    display: flex;
    justify-content: center;
    color: #d0d2d6;
    font-size: 15px;
    margin-top: 18px;
  }

  .noCollect {
    display: flex;
    align-items: center;
    justify-content: center;
    // height: 500px;
    width: 100%;
    flex-wrap: wrap;
  }

  .noCollect__button {
    height: 40px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e4322c;
    border-radius: 50px;
    border: 1px solid #e4322c;
    font-size: 14px;
    margin-top: -110px
  }

  .shop__noCar {
    margin-top: 70px;
    width: 69%;
  }

  .noReviews {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: white;
    flex-wrap: wrap;

    &__center {
      display: flex;
      justify-content: center;
      width: 590rpx;
      flex-wrap: wrap;
      height: 340px;

      &--img {
        margin-top: 50px;
      }

      &--text {
        margin-top: 10px;
        font-size: 16px;
      }
    }

  }
</style>